<template>
  <div :data-bar-cid="cid" class="chart" />
</template>

<script>
/** *
   * 可以考虑每个画一个图分别是独立的chart实例
   * https://www.echartsjs.com/examples/editor.html?c=bar-y-category-stack
   */
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
// import echarts from 'echarts'
// import { ChartMixin } from '../mixin'
export default {
  name: 'LineChart',
  // mixins: [ChartMixin],
  props: {
    yData: {
      type: [String],
      required: true
    },
    cid: {
      type: [String],
      required: true
    },
    name: {
      type: [String],
      required: true
    }
  },
  data() {
    return {
      y: []
    }
  },
  watch: {
    yData(newData) {
      this.setOptions(JSON.parse(newData), this.name)
    }
  },
  mounted() {
    this.chart = this.$chart.init(this.$el)
    this.setOptions(JSON.parse(this.yData), this.name)
  },
  methods: {
    more() {
      // 应该获取数据 重新渲染图表
      this.setOptions()
    },
    setOptions(newData, name) {
      this.chart.setOption({
        // backgroundColor: '#efcaef',
        title: {
          text: ''
        },
        // color: ['linear-gradient(90deg,rgba(194,233,251,1) 0%,rgba(161,196,253,1) 100%)'],
        // color: ['linear-gradient(90deg,rgba(194,233,251,1) 0%,rgba(161,196,253,1) 100%)'],
        tooltip: {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
          },
          axisPointer: {
            type: 'none'
          }
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        legend: {
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        xAxis: {
          type: 'value',
          show: false,
          axisLine: {
            show: false
          },
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisTick: {
            show: false
          }
        },
        yAxis: {
          inverse: true,
          axisLine: {
            show: false
          },
          // show : false,
          axisTick: {
            show: false
          },
          type: 'category',
          data: ['利他主义', '美的追求', '创造发明', '智力刺激', '独立自主', '成就满足', '声望地位', '管理权力', '经济报酬', '安全稳定', '工作环境', '上司关系', '同事关系', '多样变化', '生活方式']
        },
        series: [
          {
            label: {
              backgroundColor: 'red'
            },
            name: '职业价值观',
            type: 'bar',
            stack: '总量',
            data: newData,
            barWidth: 16,
            itemStyle: {
              barBorderRadius: [25, 25, 0, 0],
              normal: {
                color: new this.$chart.graphic.LinearGradient(
                  0, 1, 1, 0,
                  [
                    { offset: 0, color: 'rgba(194,233,251,1)' },
                    { offset: 1, color: 'rgba(161,196,253,1)' }
                  ]
                )
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .chart {
    margin: auto;
    width: 550px;
    height: 800px;
  }
</style>
